<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 20px;">添加题目</h2>
     <form @submit.prevent="addPro">
        <div class="mb-3">
            <label for="setId" class="form-label">&nbsp;&nbsp;题集号(setId): </label>
            <span type="text" class="form-control" id="setId"> {{ setId }} </span>
        </div>
        <div class="mb-3">
            <label for="proType" class="form-label">&nbsp;&nbsp;题目类型(proType): </label>
            <div>
                &nbsp;&nbsp;
                <div class="form-check form-check-inline">
                <input class="form-check-input" v-model="proType" type="radio" name="proType" value="1">
                <label class="form-check-label" for="inlineRadio1">查询类(select)</label>
                </div>

                &nbsp;&nbsp;
                <div class="form-check form-check-inline">
                <input class="form-check-input" v-model="proType" type="radio" name="proType"  value="2">
                <label class="form-check-label" for="inlineRadio2">添加类(insert)</label>
                </div>

                &nbsp;&nbsp;
                <div class="form-check form-check-inline">
                <input class="form-check-input" v-model="proType" type="radio" name="proType" value="3">
                <label class="form-check-label" for="inlineRadio3">修改类(update)</label>
                </div>

                &nbsp;&nbsp;
                <div class="form-check form-check-inline">
                <input class="form-check-input" v-model="proType" type="radio" name="proType"  value="4">
                <label class="form-check-label" for="inlineRadio4">删除类(selete)</label>
                </div>
            </div>
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">&nbsp;&nbsp;题目描述(content): </label>
            <input type="text" v-model="content" class="form-control" id="content" required>
        </div>
        <div class="mb-3">
            <label for="correctSQL" class="form-label">&nbsp;&nbsp;正确的SQL语句(correctSQL): </label>
            <input type="text" v-model="correctSQL" class="form-control" id="correctSQL" required>
        </div>
        <div align="center">
            <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
            <button type="submit" class="btn btn-primary" style="width:20%;">添加</button>
        </div>
    </form>
    </ContentField>
 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import {useStore} from 'vuex';
 import {useRoute} from 'vue-router';
 import {ref} from 'vue';
 import $ from 'jquery';
 import router from '@/router/index';

 export default{
     name: 'addPro',
     components: {
         NavBar,
         ContentField,
     },
     setup(){
        const store = useStore();
        const route = useRoute();

        let proType = ref('');
        let content = ref('');
        let correctSQL = ref('');
        let error_message = ref('');

        let setId = route.params.setId;

        const addPro = () => {
            // console.log("========");
            // console.log(setId.value);
            // console.log(proType.value);
            // console.log(content.value);
            // console.log(correctSQL.value);
            // console.log("========")
            $.ajax({
                url: "http://localhost:8090/sls/queryPro/addPro",
                type: 'post',
                data: {
                    setId: setId,
                    proType: proType.value,
                    content: content.value,
                    correctSQL: correctSQL.value,

                },
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    console.log(resp);
                    if(resp.error_message === 'success'){
                        router.push({name: 'setProfile', params: {setId: setId }});
                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                },
                error(resp){
                    console.log(resp);
                }
            });
        }

        return{
            addPro,
            setId,
            proType,
            content,
            correctSQL,

        }
    
     }

 }
 
 </script>
 
 
 
 <style scoped>

 </style>